<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入 Element UI 的 CSS 文件 -->
    <link rel="stylesheet" href="/element-ui/index.css">
    <style>
        body {
            padding: 20px;
        }
    </style>
</head>

<body>
<div id="app">
    <!-- 查询条件 -->
    <!-- 修改为使用 el-form-item -->
    <div class="search-box">
        <!-- 设置固定的 label-width 让 input 框上下对齐 -->
        <el-form :inline="true" :model="searchForm" label-width="100px" label-position="right">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="列名">
                        <el-input v-model="searchForm.columnName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="注释">
                        <el-input v-model="searchForm.comments"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <!-- 修改父级 el-row 布局 -->
                <el-row type="flex" justify="end">
                    <el-col :span="8">
                        <el-form-item>
                            <el-button @click="search">查询</el-button>
                            <el-button @click="resetSearch">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-row>
        </el-form>
    </div>
    <el-table :data="paginatedData" style="width: 100%"> <!-- 设置表格高度，可根据实际情况调整 -->
        <el-table-column label="序号" width="80">
            <template slot-scope="scope">
                {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column prop="COLUMN_NAME" label="列名" show-overflow-tooltip>
            <template slot-scope="scope">
                <span @click="searchByColumnName(scope.row.COLUMN_NAME)">{{ scope.row.COLUMN_NAME }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="COMMENTS" label="注释" show-overflow-tooltip>
            <template slot-scope="scope">
                <el-input
                    v-model="scope.row.COMMENTS"
                    style="color: blue;"
                    @blur="submit(scope.row)"
                ></el-input>
            </template>
        </el-table-column>
        <el-table-column prop="RN" label="次数" show-overflow-tooltip></el-table-column>
        <el-table-column prop="rugeComments" label="确认注释" show-overflow-tooltip></el-table-column>
        <el-table-column prop="option" label="操作" min-width="120" align="center">
            <template slot-scope="scope">
                <el-button @click="submit(scope.row)" type="text" size="small" style="color:green">确认</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 完整的分页组件 -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
    >
    </el-pagination>
</div>
<!-- 引入 Vue 和 Element UI 的 JS 文件 -->
<script src="/element-ui/Vue.js"></script>
<script src="/element-ui/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                // 原始数据初始化为空数组
                originalData: [],
                searchForm: {
                    owner: '',
                    tableName: '',
                    columnName: '',
                    comments: '',
                    page: '1',
                    rows: '10'
                },
                currentPage: 1,
                pageSize: 10,
                filteredData: [],
                paginatedData: []
            };
        },
        mounted() {
            // 调用搜索方法获取数据
            this.search(true);
            // 添加键盘事件监听
            window.addEventListener('keydown', this.handleKeyDown);
        },
        beforeDestroy() {
            // 移除键盘事件监听，防止内存泄漏
            window.removeEventListener('keydown', this.handleKeyDown);
        },
        methods: {
            search(resetPage = false) {
                if (resetPage) {
                    // 仅在需要时将页码重置为 1
                    this.currentPage = 1;
                }
                this.searchForm.page = this.currentPage.toString();
                this.searchForm.rows = this.pageSize.toString();

                // 使用 fetch API 从接口获取数据
                fetch('/database/getColComments', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.searchForm)
                })
                    .then(response => response.json())
                    .then(data => {
                        this.paginatedData = data.data.list
                        this.total = data.data.total
                    })
                    .catch(error => {
                        console.error('获取数据时出错:', error);
                    });
            },
            submit(obj) {
                console.log(obj, "===");
                // 使用 fetch API 从接口获取数据
                fetch('/database/updateColComments', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(obj)
                })
                    .then(response => response.json())
                    .then(data => {
                        this.search(true);
                    })
                    .catch(error => {
                        console.error('获取数据时出错:', error);
                    });
            },
            handleCurrentChange(page) {
                this.currentPage = page;
                this.search();
            },
            handleSizeChange(size) {
                this.pageSize = size;
                this.search();
            },
            resetSearch() {
                this.searchForm = {
                    owner: '',
                    tableName: '',
                    columnName: '',
                    comments: '-',
                    page: '1',
                    rows: '10'
                };
                this.currentPage = 1;
                this.pageSize = 10;
                this.search(true);
            },
            handleKeyDown(event) {
                if (event.key === 'Enter') {
                    this.search(true);
                }
            },
            searchByColumnName(columnName) {
                this.searchForm.columnName = columnName;
                this.searchForm.comments = '';
                this.search(true);
            },
        }
    });
</script>
</body>

</html>